<template>
  <LsyContentContainer title="响应式表单" desc="响应式断点">
    <el-card>
      <el-form :model="form" label-width="auto">
        <div id="filter">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="收款人信息">
                <el-input
                  v-model="form.info"
                  placeholder="账号/开户名"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="单号1">
                <el-input v-model="form.itemNo1"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="单号2">
                <el-input v-model="form.itemNo2"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="单号3">
                <el-input v-model="form.itemNo3"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="单号4">
                <el-input v-model="form.itemNo3"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="单号5">
                <el-input v-model="form.itemNo3"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <el-button type="primary" @click="onReset">重置</el-button>
      <!-- 收起展开 -->
      <el-button @click="shiftForm">
        <span>
          {{ fold ? '收起' : '展开 ' }}
        </span>
      </el-button>
    </el-card>
  </LsyContentContainer>
</template>
<script setup>
import { onMounted, ref } from 'vue'

const form = ref({
  info: '',
  itemNo1: '',
  itemNo2: '',
  itemNo3: '',
})
// 最大显示元素个数
const maxShow = ref(3)
// 默认折叠
const fold = ref(false)
onMounted(() => {
  if (maxShow.value > 0) {
    minShow()
  }
})
const minShow = () => {
  const filter = document.getElementById('filter')
  const filterChildren = filter.children[0].children
  const filterChildrenLength = filterChildren.length
  if (filterChildrenLength > maxShow.value) {
    for (let i = 0; i < filterChildrenLength; i++) {
      if (i >= maxShow.value) {
        filterChildren[i].style.display = fold.value ? 'block' : ' none'
      }
    }
  }
}
/**
 * 查询
 */
const onSubmit = () => {
  console.log('查询')
}
/**
 * 重置
 */
const onReset = () => {
  form.value = {}
}
const shiftForm = () => {
  fold.value = !fold.value
  minShow()
}
</script>

<style lang="scss" scoped></style>
